<template>
  <div style="display: flex; justify-content: center;">
    <div class="content">
      <div class="title">
        事件列表
      </div>

      <div class="content_box">
        <!-- 导航 -->
        <tabs></tabs>
        <!-- 搜索 -->
        <search></search>
        <!-- 信息 -->
        <info></info>


      </div>
    </div>
  </div>
</template>
<script setup>
import info from '../components/detail.vue'
import search from '../components/search.vue'
import tabs from '../components/tabs.vue'
</script>

<style scoped>
.content {
  background-color: #232f3d;
  width: 350px;
  color: #e8e8e8;
}

.title {
  background-color: #0f1418;
  width: 340px;
  margin-bottom: 10px;
  height: 40px;
  display: flex;
  align-items: center;
}

.content_box {
  background-color: #0f1418;
  width: 340px;
  box-sizing: border-box;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>